import 'dart:async';

import 'package:flutter/material.dart';

class StackAnimation extends StatefulWidget {
  const StackAnimation({super.key});

  @override
  State<StackAnimation> createState() => _StackAnimationState();
}

class _StackAnimationState extends State<StackAnimation> {
  double top = 0;
  double bottom = 0;

  double left = 300;
  double right = 300;

  double firstLeft = 245;
  double firstRight = 245;

  double secondLeft = 630;
  double secondRight = 0;

  double thirdLeft = 630;
  double thirdRight = 0;

  AlignmentGeometry _alignmentGeometry = Alignment.bottomCenter;
  bool isShowSecond = false;
  bool isShowThird = false;

  @override
  void initState() {
    Timer(const Duration(milliseconds: 500), () {
      setState(() {
        bottom = 100;
        left = 100;
        right = 400;
        _alignmentGeometry = Alignment.center;
      });
    });
    Timer(const Duration(milliseconds: 5000), () {
      setState(() {
        bottom = 100;
        left = 0;
        right = 1000;
        _alignmentGeometry = Alignment.center;
        firstLeft = 70;
        firstRight = 420;
        isShowSecond = true;
        secondLeft = 400;
        secondRight = 100;
      });
    });
    Timer(const Duration(milliseconds: 10000), () {
      setState(() {
        firstLeft = 0;
        firstRight = 600;
        isShowThird = true;
        secondLeft = 245;
        secondRight = 245;
        thirdLeft = 420;
        thirdRight = 72;
      });
    });

    Timer(const Duration(milliseconds: 15000), () {
      setState(() {
        firstLeft = 0;
        firstRight = 600;
        isShowThird = false;
        secondLeft = 400;
        secondRight = 100;
      });
    });

    Timer(const Duration(milliseconds: 20000), () {
      setState(() {
        firstLeft = 245;
        firstRight =245;
        isShowSecond = false;
        // secondLeft = 400;
        // secondRight = 100;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StackAnimation"),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.blueGrey,
          ),
          AnimatedPositioned(
            left: firstLeft,
            right: firstRight,
            top: 0,
            bottom: 0,
            duration: const Duration(seconds: 1),
            child: AnimatedAlign(
              alignment: _alignmentGeometry,
              duration: const Duration(milliseconds: 1000),
              child: Container(
                width: 40,
                height: 40,
                color: Colors.red,
              ),
            ),
          ),
          AnimatedPositioned(
            top: 0,
            bottom: 0,
            left: secondLeft,
            right: secondRight,
            duration: const Duration(seconds: 3),
            child: Visibility(
                visible: isShowSecond,
                child: Center(
                  child: Container(
                    width: 40,
                    height: 40,
                    color: Colors.green,
                  ),
                )),
          ), // Positioned(
          AnimatedPositioned(
            top: 0,
            bottom: 0,
            left: thirdLeft,
            right: thirdRight,
            duration: const Duration(seconds: 3),
            child: Visibility(
                visible: isShowThird,
                child: Center(
                  child: Container(
                    width: 40,
                    height: 40,
                    color: Colors.blue,
                  ),
                )),
          ),
        ],
      ),
    );
  }
}



